<template>
    <chart :options="options" />
</template>
<script>
export default {
    name: "ChartBar",
    props: {
        data: {
            type: Array,
            default: () => {
                return []
            }
        },
        legend: {
            type: Array,
            default: () => {
                return []
            }
        },
        colors: {
            type: Array,
            default: () => {
                return null
            }
        },
        text: {
            type: String,
            default: () => {
                return ''
            }
        },
        subtext: {
            type: String,
            default: () => {
                return ''
            }
        },
        roseType: {
            type: String,
            default: () => {
                return ''
            }
        },
        radius: {
            type: Array,
            default: () => {
                return ['60%','80%']
            }
        },
        labelLine: {
            type: Boolean,
            default: () => {
                return true
            }
        },
        label: {
            type: Boolean,
            default: () => {
                return true
            }
        },
        position: {
            type: String,
            default: () => {
                return 'outside'
            }
        },
        center: {
            type: Array,
            default: () => {
                return ['35%', '50%']
            }
        },
        subtextx: {
            type: String,
            default: () => {
                return '35%'
            }
        },
        subtexty: {
            type: String,
            default: () => {
                return 'center'
            }
        }
    },
    data(){
        return{
        }
    },
    computed:{
        options(){
            let _this = this
            var legend = {
                    formatter(name) {
                        let than = _this.data; //获取series中的data
                        let total = 0;
                        let tarValue;
                        for (let i = 0, l = than.length; i < l; i++) {
                        total += than[i].value;
                        if (than[i].name == name) {
                            tarValue = than[i].value;
                        }
                        }
                        let p = (tarValue / total) * 100;
                        return name + " " + " " + p.toFixed(2) + "%";
                    },
                    type: "scroll",
                    orient: 'vertical',
                    left: 'right',
                    align: 'left',
                    top: 'middle',
                    textStyle: {
                        color: '#B2CBFF'
                    },
                    data: _this.legend
                }
            return{
                title: {
                    text: '全省版权合同' + '\n' +'登记',
                    subtext: this.subtext,
                    x: this.subtextx,
                    y: this.subtexty,
                    textAlign: 'center',
                    textStyle: {
                        color: '#ABBFD5',
                        fontSize: 120,
                        textAlign: 'center'
                    },
                    subtextStyle: {
                        color: '#FFCD7A',
                        fontSize: 26,
                        textAlign: 'center'
                    },
                },
                tooltip: {
                    trigger: 'item',
                    borderColor: 'rgba(255,255,255,.3)',
                    backgroundColor: 'rgba(13,5,30,.6)',
                    borderWidth: 1,
                    padding: 5,
                    formatter: function(parms) {
                        var str = parms.marker + "" + parms.data.name + "</br>" +
                            "数量：" + parms.data.value + "</br>" +
                            "占比：" + parms.percent + "%";
                        return str;
                    }
                },
                legend: legend,
                color: this.colors,
                series: [{
                    type: 'pie',
                    z: 3,
                    center: this.center,
                    radius: this.radius,
                    clockwise: true,
                    avoidLabelOverlap: true,
                    roseType: this.roseType,
                    hoverOffset: 15,
                    // itemStyle: {
                    //     normal: {
                    //         color: function(params) {
                    //             return this.colorList[params.dataIndex]
                    //         }
                    //     }
                    // },
                    label: {
                        show: this.label,
                        position: this.position,
                        formatter: '{a|{b}：{d}%}\n{hr|}',
                        padding: [50, -40],
                        // normal:{
                        //     position: this.position,
                                textStyle : {
                                    fontWeight : 300 ,
                                    fontSize : 20    //文字的字体大小
                                },
                                // formatter:'{d}%'
                            // },
                        rich: {
                            a: {
                                padding: [-10, 15, -20, 15]
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            show: this.labelLine,
                            length: 20,
                            length2: 20,
                            lineStyle: {
                                width: 1
                            }
                        }
                    },
                    data: this.data
                },]
            }
        }
    }
}
</script>